<template>
  <div class="elDatePickerVue">
    <el-date-picker
      type="datetime"
      v-model="time[0]"
      :clearable="false"
      :picker-options="startPickerOptions"
      value-format="yyyy-MM-dd HH:mm:ss"
      placeholder="选择日期时间">
    </el-date-picker>
    <span class="range-separator">-</span>
    <el-date-picker
      type="datetime"
      v-model="time[1]"
      :clearable="false"
      :picker-options="endPickerOptions"
      value-format="yyyy-MM-dd HH:mm:ss"
      placeholder="选择日期时间">
    </el-date-picker>
  </div>
</template>

<script>
let timeVal = [];
export default {
  name: 'elDatePickerVue',
  props: {
    value: {
      type: Array,
      default: () => ['', ''],
    },
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(val) {
        timeVal = val;
        this.time = val.concat([]);
      },
    },
    time(val) {
      timeVal = val;
      this.$emit('timeChange', val);
    },
  },
  data() {
    return {
      time: ['', ''],
      startPickerOptions: {
        // 禁用当前日期之前的日期
        disabledDate(time) {
          const date = new Date(timeVal[1]).getTime() - 1 * 24 * 60 * 60 * 1000;
          return time.getTime() > date;
        },
      },
      endPickerOptions: {
        // 禁用当前日期之前的日期
        disabledDate(time) {
          const date = new Date(timeVal[0]).getTime() - 1 * 24 * 60 * 60 * 1000;
          return time.getTime() < date;
        },
      },
    };
  },
  created() {},
};
</script>

<style scoped lang="scss">
.elDatePickerVue {
  .range-separator {
    padding: 0 10px;
  }
}
</style>
